<template>
  <div id="mybox">
    <dv-full-screen-container>
      <!-- 标题 -->
      <header class="myhader">
        <div style="flex: 0 1 30%">
          <dv-decoration-10 style="height: 5px" />
        </div>
        <div style="flex: 0 1 40%">
          <div class="dv_div">
            <dv-decoration-8 style="height: 50px; flex: 1" />
            <dv-decoration-11 style="height: 60px; flex: 1"
              >可视化大屏</dv-decoration-11
            >
            <dv-decoration-8 :reverse="true" style="height: 50px; flex: 1" />
          </div>
        </div>
        <div style="flex: 0 1 30%">
          <dv-decoration-10 style="height: 5px; transform: rotateY(180deg)" />
        </div>
      </header>
      <!-- 主体 -->
      <article class="myarticle">
        <div class="myborder">
            <div style="flex:0 1 30%">
                <!-- 库存一 -->
                <dv-border-box-8 style=" width: 100%;height: 24%;">
                    <CapsuleColumn />
                </dv-border-box-8>
                <!-- 库存二 -->
                <dv-border-box-8 style="width: 100%;height: 24%;">
                    <CapsuleColumnTwo />
                </dv-border-box-8>
                <!-- 各医院死亡人数占比 -->
                <dv-border-box-8 style="width: 100%;height: 24%;">
                    <Mytest />
                </dv-border-box-8>
            </div>
            <div style="flex:0 1 60%">
                <!-- 进度显示 -->
                <dv-border-box-8 style="width: 100%;height: 10%;">
                    <ProgressPool />
                </dv-border-box-8>
                 <!-- 财务折线图 -->
                <dv-border-box-8 style="width: 100%;height: 62%;">
                    
                      
                    <FinancialLine />
                </dv-border-box-8>
            </div>
            <div style="flex:0 1 25%">
                <!-- 值班排表 -->
                <dv-border-box-8 style="width: 100%;height: 48%;">
                    <RotatingSchedule />
                </dv-border-box-8>
                <!-- 火炉温度 -->
                <dv-border-box-8 style="width: 100%;height: 24%;">
                    <FurnaceTemperature />
                </dv-border-box-8>
            </div>
        </div>
      </article>
    </dv-full-screen-container>
  </div>
</template>

<script>
import RotatingSchedule from './VisuaLiZation/RotatingSchedule.vue'     //值班排表
import FurnaceTemperature from './VisuaLiZation/FurnaceTemperature.vue' //当前火炉温度
import CapsuleColumn from './VisuaLiZation/CapsuleColumn.vue'           //库存一
import CapsuleColumnTwo from './VisuaLiZation/CapsuleColumnTwo.vue'     //库存二
import Mytest from './VisuaLiZation/mytest.vue'                         //各医院死亡人数占比
import FinancialLine from "./VisuaLiZation/FinancialLine.vue"
import ProgressPool from "./VisuaLiZation/ProgressPool.vue"
export default {
  components:{
    RotatingSchedule,
    FurnaceTemperature,
    CapsuleColumn,
    CapsuleColumnTwo,
    Mytest,
    FinancialLine,
    ProgressPool,
  }
}

</script>

<style lang="less" scoped>
#mybox {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/img/image.png");
  background-size: cover;
  // 标题
  .myhader {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    .dv_div {
      display: flex;
      color: #fff;
    }
  }
  // 主体
  .myarticle {
    width: 100%;
    height: 100%;
    .myborder {
      width: 100%;
      height: 100%;
      display: flex;
    }
  }
}
</style>
